<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/web/page/head.jsp" %>
<title>Insert title here</title>
</head>
<body>
<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">用户信息-查询条件</h2>
    <div class="layui-colla-content layui-show">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px; padding: 5px">
        <legend>用户信息-查询条件</legend>
        <form class="layui-form" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">用户账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="code" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label"></label> 
                <span> 
                <input type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="search" value="查询" /> 
                <input type="reset" class="layui-btn layui-btn-sm" value="重置" /> 
                <input type="button" class="layui-btn layui-btn-sm" value="添加" onclick="openAdd()" />
                </span>
            </div>
            <input type="hidden" name="action" value="page" />
            <input type="hidden" name="pageIndex" value="1" />
            <input type="hidden" name="pageLimit" value="5" />
        </form>
    </fieldset>
    </div></div></div>
    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="10%"><col width="20%"><col width="20%"><col width="20%">
<!--                 <col width="15%"><col> -->
            </colgroup>
            <thead>
                <tr>
                    <th>序号</th><th>账号</th><th>姓名</th><th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="user_tbody"></tbody>
        </table>
        <div id="pageInfoUser" style="text-align: right;padding-right: 30px"></div>
    </div>
    
    <script type="text/javascript">
			
			var layer = layui.layer;
			var $ = layui.jquery;
			var laytpl = layui.laytpl;
			var element = layui.element;
			var form = layui.form;
			var laydata = layui.laydata;
			var laypage = layui.laypage;
// 			var i = 1;
			element.render();
			
			form.on("submit(search)",function(data){
				$.ajax({
					url:"<%=app %>/roots/page.do",
					data:data.field,
					dataType:'json',
					type:'post',
					success:function(data){
						
						var curr = $("input[name='pageIndex']").val();
						var limit = $("input[name='pageLimit']").val();
						laypage.render({
							elem:'pageInfoUser',
							count:data.count,
							curr:curr,
							limit:limit,
							limits:[5,10,20,30,50],
							layout:['count','prev','page','next','limit','refresh','skip'],
							jump:function(obj,first){
								$("input[name='pageIndex']").val(obj.curr);
								$("input[name='pageLimit']").val(obj.limit);
								if(!first){refresh();}
							}
						})
						
						
						var html ="";
						$.each(data.data,function(i, dom) {
// 							console.log(data)
// 							console.log(dom)
					        var code = dom.code?dom.code:'';
					        var name = dom.name?dom.name:'';
					        var pass = dom.pass?dom.pass:'';
// 					        console.log(code)
					        var d={i:i+1,name:dom.name,code:dom.code,pass:dom.pass,count:dom.count};
					        var string =  laytpl($("#tradd").html()).render(d);
// 					        console.log(d)
					        html += string;
						});
						$('#user_tbody').html(html);

						layer.msg("刷新");
					}
				});
			});
			
			refresh();
			function refresh(){
				$("input[type='reset']").click();
				$("input[value='查询']").click();
			}
			function openAdd(){
				openLayer('/web/page/user/add.jsp',refresh)
			}
			function openUpd(code){
				openLayer('/web/page/user/upd.jsp?code='+code,refresh)
			}
			function openConfirm(func, title) {
				layer.confirm(title ? title : "确定进行该操作？", {
					icon : 3,
					title : '提示'
				}, func);
			}
			function del(code){
				openConfirm(function(index){
					$.ajax({
						url:"<%=app %>/roots/del.do",
						data:{action:'del',code:code},
						dataType:'text',
						cache:false,
						type:'post',
						success:function(data){
							if (data == 1) {
				                layer.msg('删除成功');
				                refresh();
				                $("input[name='pageIndex']").val(1);
				            } else if (data == "exist"){
				                layer.msg('删除失败--该数据已被使用');
				            } else {
				                layer.msg('删除失败');
				            }
						}
					});
				})
			}
			
			function openLayer(url,end){
				layer.open({
					type:2,
					area:['500px','460px'],
					fixed:false,
					maxmin:true,
					end:end,
					content:"<%=app %>"+url
				});
			}
			function closeLayer(){
				layer.close(layer.index);
			}
			
		</script>
		
		
		<script id="tradd" type="text/html">
			<tr>
			<td>{{ d.i }}</td><td>{{ d.code }}</td><td>{{ d.name }}</td>
			<td>{{ d.pass }}</td>
			<td>
    		<input type='button' value='修改' class='layui-btn layui-btn-sm' 
           		onclick='openUpd("{{ d.code }}")'/>&nbsp;
    		<a href="javascript:del('{{ d.code }}')" 
       		class="layui-btn layui-btn-xs layui-btn-danger">
        		<i class="layui-icon layui-icon-delete"></i>
    		</a>&nbsp;
			</td>
			</tr>
		</script>
</body>
</html>